<!--个人界面组件-->

<template>
  <!-- 定义用户导航栏的外层容器 -->
  <div>
    <el-row class="tac user-nav">
      <el-col :span="12">
        <el-menu
          :default-active="this.$store.state.userActiveIndex"
          :active-text-color="'#27578d'"
          class="el-menu-vertical-demo"
        >
          <el-submenu index="1">
            <!-- 定义子菜单的标题 -->
            <template slot="title">
              <i class="el-icon-user-solid"></i>
              <span>我的信息</span>
            </template>
            <!-- 定义菜单项目组 -->
            <el-menu-item-group>
              <!-- 定义一个菜单项目，idx 1-1， UserInfoClick  -->
              <el-menu-item index="1-1" @click="UserInfoClick">
                <i class="el-icon-info"></i>
                基本信息
              </el-menu-item>
              <!-- 当用户是专家时显示该菜单项目，idx 1-4，点击触发 handleExpertInfo 方法 -->
              <el-menu-item
                index="1-4"
                v-if="$store.getters.isExpert"
                @click="handleExpertInfo"
              >
                <i class="el-icon-info"></i>
                专家信息
              </el-menu-item>
              <!-- 当用户既不是专家也不是管理员时显示该菜单项目，索引为 1-2， UserAddressClick  -->
              <el-menu-item
                index="1-2"
                @click="UserAddressClick"
                v-if="!$store.getters.isExpert && !$store.getters.isAdmin"
              >
                <i class="el-icon-s-home"></i>
                收货地址
              </el-menu-item>
              <!-- 定义一个菜单项目，索引为 1-3， UserPasswordClick  -->
              <el-menu-item index="1-3" @click="UserPasswordClick">
                <i class="el-icon-s-tools"></i>
                修改密码
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <!-- 当用户既不是专家也不是管理员时显示该子菜单，索引为 2 -->
          <el-submenu
            index="2"
            v-if="!$store.getters.isExpert && !$store.getters.isAdmin"
          >
            <!-- 定义子菜单的标题 -->
            <template slot="title">
              <i class="el-icon-s-claim"></i>
              <span>我的发布</span>
            </template>
            <!-- 定义菜单项目组 -->
            <el-menu-item-group>
              <!-- 定义一个菜单项目，索引为 2-1， PublishedGoodsClick  -->
              <el-menu-item index="2-1" @click="PublishedGoodsClick">
                <i class="el-icon-s-shop"></i>
                我的商品
              </el-menu-item>
              <!-- 定义一个菜单项目，索引为 2-2， PublishedNeedsClick  -->
              <el-menu-item index="2-2" @click="PublishedNeedsClick">
                <i class="el-icon-s-comment"></i>
                我的需求
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <!-- 当用户不是管理员时显示该子菜单，索引为 4 -->
          <el-submenu index="4" v-if="!$store.getters.isAdmin">
            <!-- 定义子菜单的标题 -->
            <template slot="title">
              <i class="el-icon-s-order"></i>
              <span>专家管理</span>
            </template>
            <!-- 定义菜单项目组 -->
            <el-menu-item-group>
              <!-- 定义一个菜单项目，索引为 4-1，点击触发 handleExpertQuestion 方法 -->
              <el-menu-item index="4-1" @click="handleExpertQuestion">
                <i class="el-icon-question"></i>
                我的问答
              </el-menu-item>
              <!-- 定义一个菜单项目，索引为 4-2，点击触发 handleExpertAppoint 方法 -->
              <el-menu-item index="4-2" @click="handleExpertAppoint">
                <i class="el-icon-alarm-clock"></i>
                我的预约
              </el-menu-item>
              <!-- 只有专家有该模块权限，索引为 4-3，点击触发 PublishedKnowledgesClick 方法 -->
              <el-menu-item
                index="4-3"
                v-if="$store.getters.isExpert"
                @click="PublishedKnowledgesClick"
              >
                <i class="el-icon-reading"></i>
                我的知识
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <!-- 当用户既不是专家也不是管理员时显示该子菜单，索引为 3 -->
          <el-submenu
            index="3"
            v-if="!$store.getters.isExpert && !$store.getters.isAdmin"
          >
            <!-- 定义子菜单的标题 -->
            <template slot="title">
              <i class="el-icon-s-order"></i>
              <span>我的订单</span>
            </template>
            <!-- 定义菜单项目组 -->
            <el-menu-item-group>
              <!-- 定义一个菜单项目，索引为 3-1 UserBuyClick  -->
              <el-menu-item index="3-1" @click="UserBuyClick">
                <i class="el-icon-s-goods"></i>
                我买的
              </el-menu-item>
              <!-- 定义一个菜单项目，索引为 3-2 UserSellClick  -->
              <el-menu-item index="3-2" @click="UserSellClick">
                <i class="el-icon-goods"></i>
                我卖的
              </el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <!-- 当用户既不是专家也不是管理员时显示该菜单项目，索引为 3 UserFinance  -->
          <el-menu-item
            index="3"
            v-if="!$store.getters.isExpert && !$store.getters.isAdmin"
            @click="UserFinance"
          >
            <!-- 定义菜单项目的标题 -->
            <template slot="title">
              <i class="el-icon-postcard"></i>
              <span>我的融资</span>
            </template>

          </el-menu-item>

          <!-- 当用户是管理员时显示该菜单项目，索引为 5， UserManageClick  -->
          <el-menu-item
            index="5"
            v-if="$store.getters.isAdmin"
            @click="UserManageClick"
          >
            <i class="el-icon-s-check"></i>
            <!-- 定义菜单项目的标题 -->
            <span slot="title">用户管理</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {

    };
  },
  methods: {
    // 跳转到用户融资页面
    UserFinance(){
      this.$router.push("/home/user/userfinance").catch((err) => err);
    },
    // 跳转到用户基本信息页面
    UserInfoClick() {
      this.$router.push("/home/user/userinfo").catch((err) => err);
    },
    // 跳转到用户收货地址页面
    UserAddressClick() {
      this.$router.push("/home/user/useraddress").catch((err) => err);
    },
    // 跳转到用户修改密码页面
    UserPasswordClick() {
      this.$router.push("/home/user/userpassword").catch((err) => err);
    },
    // 跳转到用户发布商品页面
    PublishedGoodsClick() {
      this.$router.push("/home/user/publishedgoods").catch((err) => err);
    },
    // 跳转到用户发布需求页面
    PublishedNeedsClick() {
      this.$router.push("/home/user/publishedneeds").catch((err) => err);
    },
    // 跳转到管理员发布商品页面
    PublishedGoodsAdminClick() {
      this.$router.push("/home/user/publishedgoodsAdmin").catch((err) => err);
    },
    // 跳转到管理员发布需求页面
    PublishedNeedsAdminClick() {
      this.$router.push("/home/user/publishedneedsAdmin").catch((err) => err);
    },
    // 跳转到专家发布知识页面
    PublishedKnowledgesClick() {
      this.$router.push("/home/user/publishedknowledges").catch((err) => err);
    },
    // 跳转到用户购买订单页面
    UserBuyClick() {
      this.$router.push("/home/user/userbuy").catch((err) => err);
    },
    // 跳转到用户销售订单页面
    UserSellClick() {
      this.$router.push("/home/user/usersell").catch((err) => err);
    },
    // 跳转到用户管理页面
    UserManageClick() {
      this.$router.push("/home/usermanage").catch((err) => err);
    },
    // 跳转到用户专家问答页面
    handleExpertQuestion() {
      this.$router.push("/home/user/expertQuestion").catch((err) => err);
    },
    // 跳转到用户专家预约页面
    handleExpertAppoint() {
      this.$router.push("/home/user/expertAppoint").catch((err) => err);
    },
    // 跳转到专家信息页面
    handleExpertInfo() {
      this.$router.push("/home/user/expertInfo").catch((err) => err);
    },
  },
  created() {
    // 组件创建时，更新 store 中的用户活动索引为 1-1
    this.$store.commit("updateUserActiveIndex", "1-1");
  },
};
</script>

<style lang="less" scoped>
.user-content {
  width: 1100px;
  margin: 10px auto;
  // height: 100%;
  // background: #fff;
  .user-nav {
    float: left;
    width: 200px;
    margin-right: 20px;
    .el-col {
      width: 200px;
    }
  }
}
</style>